<template>
  <div
    :class="className"
    :id="id"
    :style="{ height: height, width: width }"
  ></div>
</template>

<script>
export default {
  name: "Dashboard",
  props: {
    className: {
      type: String,
      default: "chart",
    },
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartData: {
      type: Array,
    },
  },
  data() {
    return {
      chart: null,
      publicChartOptions: {
        type: "gauge", //设置图表类型
        center: ["50%", "60%"], //的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
        startAngle: 200, //仪表盘起始角度。
        endAngle: -20, //仪表盘结束角度。
        min: 0, //最小的数据值，映射到 minAngle
        max: 2000, //最大的数据值，映射到 maxAngle。
        anchor: {
          //仪表盘中心点
          show: false,
        },
      },
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      // console.log(echarts);
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(this.id));
      // 绘制图表

      const {
        type,
        center,
        startAngle,
        endAngle,
        min,
        max,
        anchor,
      } = this.publicChartOptions;

      let seriesInside = {
        type,
        center,
        startAngle,
        endAngle,
        min,
        max,
        anchor,
        radius: "90%",//控制大小
        axisLine: {
          //线条样式
          // show: false
          lineStyle: {
            width: 8,
            color: [
              //浅变色背景
              [
                1,
                new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0.5,
                    color: "#9EC1FA",
                  },
                  {
                    offset: 1,
                    color: "#948BFF",
                  },
                ]),
              ],
            ],
          },
        },
        splitLine: {
          show:false,
          //刻度_分割线样式
        },
        axisTick: {
          //刻度样式
          splitNumber: 4, //仪表盘刻度的分割段数。
          length: 6, //刻度线长度(半径百分比)
          distance: 4, //刻度线距离轴线距离
          lineStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(158,191,250)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgb(148,141,255)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        axisLabel: {
          show: false, //不显示刻度标签
        },
        pointer: {
          show: false,
        },
        title: {
          show: true,
          offsetCenter: [0, "45%"],
          color: "rgb(51,51,51)",
          fontSize: 12,
        },
        detail: {
          show: true,
          //显示数据的样式
          valueAnimation: true,
          offsetCenter: [0, "5%"],
          fontSize: 30,
          lineHeight: 30,
          formatter: "{value}",
          fontWeight: 500,
          // color: 'auto',
          color: "rgba(47,128,255)",
        },
        data: this.chartData,
      };

      let seriesOutside = {
        type,
        center,
        startAngle,
        endAngle,
        min,
        max,
        anchor,
        z: 100,
        radius: "100%",
        progress: {
          show: false,
        },
        pointer: {
          //仪表盘指针
          show: true,
          icon: "circle",
          length: "198%",
          itemStyle: {
            color: "rgb(47,128,255)",
          },
        },
        axisLine: {
          //线条样式
          // show: false
          lineStyle: {
            width: 1,
            color: [
              //浅变色背景
              [
                1,
                new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0.5,
                    color: "#9EC1FA",
                  },
                  {
                    offset: 1,
                    color: "#948BFF",
                  },
                ]),
              ],
            ],
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        detail: {
          show: false,
        },
        title: {
          show: false,
        },
        data: this.chartData,
      };

      let options = {
        series: [seriesInside, seriesOutside],
      };

      myChart.setOption(options);
      //
    },
  },
};
</script>

<style></style>
